<template>
  <!-- 聊天界面 -->
  <div class="chatWrapper">
    <div class="main">
      <div class="left">
        <div class="title">
          <img src="@/assets/img/logo.png" alt="" />
          <h2>非凡价值由此开始创造</h2>
        </div>
        <div class="content">
          <div class="leftUser">
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="leftContent">
                很高兴为您服务，请问有什么可以帮到您？
              </div>
            </div>
          </div>
          <div class="leftUser">
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="leftContent">
                如果不方便，您可以添加一下顾问老师的微信，微信上咨询更方便，而且微信上也有一些内容可以提供给您参考，也可以针对的给您做更加具体的分析。
              </div>
            </div>
          </div>
          <div class="leftUser">
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="leftContent">
                很高兴为您服务，请问有什么可以帮到您？
              </div>
            </div>
          </div>
          <div class="leftUser">
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="img">
                <img src="@/assets/img/erweima.png" alt="" />
              </div>
            </div>
          </div>
          <div class="rightUser">
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="img">
                <img src="@/assets/img/erweima.png" alt="" />
              </div>
            </div>
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
          </div>
          <div class="rightUser">
            <div class="userContent">
              <div class="userName">客服小艾 09:02:31</div>
              <div class="leftContent">
                如果不方便，您可以添加一下顾问老师的微信，微信上咨询更方便，而且微信上也有一些内容可以提供给您参考，也可以针对的给您做更加具体的分析。
              </div>
            </div>
            <div class="photo">
              <el-avatar shape="circle">
                <img slot="default" src="@/assets/img/kefu.png" alt="" />
              </el-avatar>
            </div>
          </div>
        </div>
        <div class="inputBox">
          <div class="text">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea2"
              resize="none"
              maxlength="150"
              rows="3"
            >
            </el-input>
          </div>
          <div class="inputBox-item">
            <div class="files iconfont icon-wenjian"></div>
            <div class="send">发送</div>
          </div>
        </div>
      </div>
      <div class="right">
          <div class="R-title">宇喜咨询专线</div>
          <div class="phone">400-888-888</div>
          <div class="information">
              <div class="bigImg">
                  <img src="@/assets/img/zixun.png" alt="">
              </div>
              <p>点击图片了解更多资讯</p>
          </div>
          <div class="issueList">
              <div class=""></div>
              <div class="issue"></div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      textarea2: ''
    }
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
